<!--
 * @Description: 简易精神病量表bprs测评
 * @Author: ZhangHan
 * @Date: 2025-09-01 11:08:44
 * @LastEditTime: 2025-10-09 08:59:45
 * @LastEditors: zhangHan
-->
<template>
  <!-- page-meta 解决popup遮挡下内容滚动 -->
  <page-meta
    :page-style="'overflow:' + (show ? 'hidden' : 'visible')"
  ></page-meta>
  <view class="formpage">
    <view class="tips">
      <view class="boldtext">评分标准：</view>
      <view class="text"
        >未测（0分）；无（1分）；很轻（2分）；轻度（3分）；中度（4分）；偏重（5分）；重度（6分）；极重（7分）</view
      >
    </view>

    <uni-forms
      ref="formRef"
      :border="true"
      label-position="top"
      :modelValue="formData"
      :rules="getRules()"
    >
      <uni-forms-item
        label-width="100%"
        :label="item.label"
        v-for="item in FORMARR"
        required
        :name="item.field"
        :key="item.field"
      >
        <uni-data-checkbox
          v-model="formData[item.field]"
          :localdata="getPickerData(item.options)"
        ></uni-data-checkbox>
      </uni-forms-item>
    </uni-forms>
    <view class="btn_group">
      <view class="reset" @click="handleReset">重置</view>
      <view class="submit" @click="handleSubmit">提交</view>
    </view>
  </view>

  <uni-popup @change="change" ref="popup" background-color="#fff">
    <view class="popup-content">
      <view>总分:{{ popupInfo?.allNum }}</view>
      <view style="color: red">{{ popupInfo?.title }}</view>
      <view>{{ popupInfo?.desc }}</view>
    </view>
  </uni-popup>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
import { FORMARR, SCORE_EVALUATION } from "./data";
import { getPickerData, resetForm } from "@/utils/common";
import { BPRS_GRADE_TYPE } from "@/concacts/valueEnum";

const formRef = ref();
const popup = ref();
const formData = reactive<any>({});
const show = ref(false);
const popupInfo = reactive<any>({
  allNum: undefined,
  desc: undefined,
  title: undefined,
});

//重置
const handleReset = () => {
  formRef.value?.clearValidate();
  resetForm(formData);
  resetForm(popupInfo);
};

//提交
const handleSubmit = () => {
    console.log(formData,'-0-----');
    
  formRef.value
    ?.validate()
    .then(() => {
      getAllNum();
      popup.value.open("bottom");
    })
    .catch((err: any) => {
      console.log(err);
    });
};

function change(e: any) {
  show.value = e.show;
}

//校验规则
const getRules = () => {
  const rules: any = {};
  FORMARR.forEach((item) => {
    rules[item.field] = {
      rules: [{ required: true, errorMessage: `请选择${item.label}` }],
    };
  });
  return rules;
};

//获取总分
const getAllNum = () => {
  let num = 0;
  FORMARR.forEach((item) => {
    // num += formData[item.field].options.grade;
    const obj: any = BPRS_GRADE_TYPE;
    num += obj[formData[item.field]]?.grade;
  });
  popupInfo.allNum = num;
  getDesc(num);
};

//根据总分获取评估文本
const getDesc = (allNum: number) => {
  if (allNum <= 35) {
    popupInfo.desc = SCORE_EVALUATION.low.description;
    popupInfo.title = SCORE_EVALUATION.low.title;
  } else if (allNum <= 50 && allNum > 36) {
    popupInfo.desc = SCORE_EVALUATION.moderate.description;
    popupInfo.title = SCORE_EVALUATION.moderate.title;
  } else if (allNum <= 70 && allNum > 51) {
    popupInfo.desc = SCORE_EVALUATION.high.description;
    popupInfo.title = SCORE_EVALUATION.high.title;
  } else if (allNum > 70) {
    popupInfo.desc = SCORE_EVALUATION.severe.description;
    popupInfo.title = SCORE_EVALUATION.severe.title;
  }
};
</script>

<style scoped lang="scss">
.formpage {
  width: 100%;
  height: 100%;
  background: white;
  box-sizing: border-box;
  padding: 24rpx 32rpx;
}

.tips {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  color: #5f5f5f;

  .boldtext {
    color: #333333;
    font-weight: bold;
    width: auto;
  }
  .text {
    flex: 1;
    font-size: 24rpx;
  }
}

.btn_group {
  width: 100%;
  margin-top: 32rpx;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .reset {
    width: 48%;
    height: 90rpx;
    text-align: center;
    line-height: 90rpx;
    background: #4335d6;
    color: white;
    border-radius: 20rpx;
  }
  .submit {
    width: 48%;
    height: 90rpx;
    text-align: center;
    line-height: 90rpx;
    background: #1dca1d;
    color: white;
    border-radius: 20rpx;
  }
}

.popup-content {
  height: 30vh;
  border-top-left-radius: 20rpx;
  border-top-right-radius: 20rpx;
  box-sizing: border-box;
  padding: 32rpx;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
</style>
